<!DOCTYPE html>
<html>
<head>
<title>Products</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            border: none;
            box-sizing: border-box;
            outline: none;
        }
        .box{
            width: 100%;
            height: 50px;
        }
        input{
            display: none;
        }
        label{
            width: 100%;
            height: 50px;
            display: inline-block;
            line-height: 50px;
            position: relative;
            text-align: center;
        }
        label:active{
            background: #EEEEEE;
        }
        label:after{
            content: "";
            width: 20px;
            height: 20px;
            border: 1px solid #8D8D8D;
            border-radius: 20px;
            display: inline-block;
            position: absolute;
            top: 15px;
            left: 15px;
        }
        input:checked+label:after{
            background-color: #8D8D8D;
        }

        .line{
            width: 100%;
            height: 1px;
            background: #CCCCCC;
            opacity: 0.3;
        }




		html,body,a,div,i,span{margin: 0;padding: 0;}
		a{text-decoration: none;}
		body{margin: 50px;}
		.select,.selectNext{cursor:pointer;position:relative;width: 100px;height: 45px;border: 1px solid #CCCCCC;border-radius: 6px;line-height: 45px;font-size: 14px;color: #666666;padding-left: 6px;}
		.xl-icon,.xl-iconNext{position: absolute;width: 20px;height: 20px;
			background-image: url("images/xl-icon_03.png");
			background-position: 4px 0px;
			background-repeat: no-repeat;
			right: 0;
			top:14px;
		}
		.select:hover,.selectNext:hover{background-color: #f7f7f7;}
		.sq-icon{background-position: 4px -33px;}
		/*--下拉选择列表样式--*/
		.selectList,.selectListNext{z-index:999;display:none;width: 175px;border: 1px solid #CCCCCC;border-radius: 6px;position: absolute;top:45px;left: -38px;}
		.listA,.listANext{width: 100%;height: 40px;line-height: 40px;font-size: 14px;color: #8D8D8D;text-align: center;display: block;background-color: #FFFFFF;}
		.listA:hover,.listANext:hover{background-color: #f7f7f7;color: #545454;}
		.listA:first-child,.listANext:first-child{border-radius: 6px 6px 0 0;}
		.listA:last-child,.listANext:last-child{border-radius: 0 0 6px 6px;}
		/*-------------------------------------------------------------------------------------------------*/
		.frameTriangle{
			width: 10px;
			height: 10px;
			background-image: url(images/xl-icon_03.png);
			background-position: -1px -35px;
			background-repeat: no-repeat;
			display: block;
			position: absolute;
			top: -10px;
			left: 95px;
			background-color: #fff;
		}
		.dropDown{position: relative;}
		.selectListNext{top:58px;}
    </style>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- start menu -->
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>
<script src="js/jquery-3.3.1.js"></script>
<script src="layer/layer.js"></script>
<script src="js/jquery.easydropdown.min.js"></script>
<script type="text/javascript" src="js/dropDown.js"></script>

<!-- slide -->
</head>
<body>
<!--header-->
<div class="header">
	<div class="header-top">
		<div class="container">
			<div class="col-sm-4 logo">
				<a href="index.html"><img src="images/logo.png" alt=""></a>
			</div>
			<div class="col-sm-4 header-left" style="width: 400px">
				<div id="userInfo">
				</div>
				<div class="cart box_1">
					<a href="checkout.html">
						<h3> <div class="total">
							<img src="images/cart.png" alt=""/></h3>
					</a>
					<p><a href="javascript:;" class="simpleCart_empty">购物车</a></p>

				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="container">
		<div class="head-top">
			<div class="col-sm-2 number">
				<span><i class="glyphicon glyphicon-phone"></i>085 596 234</span>
			</div>
			<div class="col-sm-8 h_menu4">
				<ul class="memenu skyblue">
					<li class=" grid"><a  href="index.html">主页</a></li>
					<li><a  href="products.html">男子</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有服饰</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">上衣</a></li>
											<li><a style="color: black" href="products.html">短袖体恤</a></li>
											<li><a style="color: black" href="products.html">运动卫衣</a></li>
											<li><a style="color: black" href="products.html">夹克/外套</a></li>
											<li><a style="color: black" href="products.html">棉服/羽绒服</a></li>
											<li><a style="color: black" href="products.html">运动下装</a></li>
											<li><a style="color: black" href="products.html">泳裤</a></li>
											<li><a style="color: black" href="products.html">比赛服 & Chinos</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有鞋类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">跑步</a></li>
											<li><a style="color: black" href="products.html">篮球</a></li>
											<li><a style="color: black" href="products.html">户外</a></li>
											<li><a style="color: black" href="products.html">足球</a></li>
											<li><a style="color: black" href="products.html">网球</a></li>
											<li><a style="color: black" href="products.html">拖鞋</a></li>
											<li><a style="color: black" href="products.html">休闲</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">配附件类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">包</a></li>
											<li><a style="color: black" href="products.html">袜子</a></li>
											<li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
											<li><a style="color: black" href="products.html">足球/篮球</a></li>
											<li><a style="color: black" href="products.html">运动装备</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li><a  href="products.html">女子</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有服饰</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">上衣</a></li>
											<li><a style="color: black" href="products.html">短袖体恤</a></li>
											<li><a style="color: black" href="products.html">运动卫衣</a></li>
											<li><a style="color: black" href="products.html">夹克/外套</a></li>
											<li><a style="color: black" href="products.html">短裙/连衣裙</a></li>
											<li><a style="color: black" href="products.html">运动下装</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有鞋类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">跑步</a></li>
											<li><a style="color: black" href="products.html">户外</a></li>
											<li><a style="color: black" href="products.html">足球</a></li>
											<li><a style="color: black" href="products.html">网球</a></li>
											<li><a style="color: black" href="products.html">拖鞋</a></li>
											<li><a style="color: black" href="products.html">休闲</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">配附件类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">包</a></li>
											<li><a style="color: black" href="products.html">袜子</a></li>
											<li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
											<li><a style="color: black" href="products.html">球类</a></li>
											<li><a style="color: black" href="products.html">运动装备</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li><a  href="typo.html">品牌</a></li>
					<li><a class="color6" href="">联系我们</a></li>
				</ul>
			</div>
			<div class="col-sm-2 search">
				<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a>
			</div>
			<div class="clearfix"> </div>
			<!---pop-up-box---->
			<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
			<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
			<div id="small-dialog" class="mfp-hide">
				<div class="search-top">
					<div class="login">
						<input type="submit" value="">
						<input type="text" value="Type something..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}">
					</div>
					<p>	Shopping</p>
				</div>
			</div>
			<script>
                $(document).ready(function() {
                    $('.popup-with-zoom-anim').magnificPopup({
                        type: 'inline',
                        fixedContentPos: false,
                        fixedBgPos: true,
                        overflowY: 'auto',
                        closeBtnInside: true,
                        preloader: false,
                        midClick: true,
                        removalDelay: 300,
                        mainClass: 'my-mfp-zoom-in'
                    });

                });
			</script>
			<!---->
		</div>
	</div>
</div>
<!--content-->
<div class="products">
	<div class="container">
		<!--商品列表-->
		<div id="product" class="col-md-9">
			<!--翻页按钮-->
			<div style="background: none;padding: 0px 0px 0px 7px;margin: 1px 4px 0px 0px; float:left;width:34px;height:42px;font-size:20px;border:1px solid #c0c0c0;">
				<a id="Ahref1" onclick="previousPage()" href="#" style="color:#8D8D8D;font-size:30px; background: none;font-weight: 800"><</a>
			</div>
			<div style="background: none;padding: 0px 0px 0px 9px;margin: 1px 20px 0px 0px; float:left;width:34px;height:42px;font-size:20px;border:1px solid #c0c0c0;">
				<a id="Ahref2" onclick="nextPage()" href="#" style="color:#8D8D8D;font-size:30px; background: none;font-weight: 800">></a>
			</div>
			<div class="dropDown" style="float:left">
				<div class="selectNext">
					<span id="pageNum" class="selectValNext" onselectstart="return false"  ></span>
					<i class="xl-iconNext"></i>
				</div>
				<div class="selectListNext">
					<i class="frameTriangle"></i>
					<div id="page" class="dropDown">

					</div>
				</div>
			</div>
			<div id="totalPage" style="padding-top: 10px; float: left;"></div>
			<div id="totalProduct" style="padding-top: 10px;"></div>

			<!--第一行数据-->
			<div id="productList1" class="content-top1">

			</div>
			<div class="clearfix"> </div>
			<!--第二行数据-->
			<div id="productList2" class="content-top1">

			</div>
			<div class="clearfix"> </div>
			<!--第三行数据-->
			<div id="productList3" class="content-top1">

			</div>
			<div class="clearfix"> </div>
			<!--第四行数据-->
			<div id="productList4" class="content-top1">

			</div>
		</div>
		<div id="attribute" class="col-md-3 product-bottom">
			<br>
			<h3><b>筛选条件</b></h3>
		</div>
		<div class="clearfix"> </div>
	</div>
</div>
<!--//content-->
<!--footer-->
<div class="footer">
	<div class="container">
		<div class="footer-top">
			<div class="col-md-4 top-footer1">
				<h2>Newsletter</h2>
					<form>
						<input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
						<input type="submit" value="SUBSCRIBE">
					</form>
			</div>
			<div class="clearfix"> </div>	
		</div>	
	</div>
	<div class="footer-bottom">
		<div class="container">
				<div class="col-md-3 footer-bottom-cate">
					<h6>Categories</h6>
					<ul>
						<li><a href="#">Curabitur sapien</a></li>
						<li><a href="#">Dignissim purus</a></li>
						<li><a href="#">Tempus pretium</a></li>
						<li><a href="#">Dignissim neque</a></li>
						<li><a href="#">Ornared id aliquet</a></li>
						
					</ul>
				</div>
				<div class="col-md-3 footer-bottom-cate">
					<h6>Feature Projects</h6>
					<ul>
						<li><a href="#">Curabitur sapien</a></li>
						<li><a href="#">Dignissim purus</a></li>
						<li><a href="#">Tempus pretium</a></li>
						<li><a href="#">Dignissim neque</a></li>
						<li><a href="#">Ornared id aliquet</a></li>
						
					</ul>
				</div>
				<div class="col-md-3 footer-bottom-cate">
					<h6>Top Brands</h6>
					<ul>
						<li><a href="#">Curabitur sapien</a></li>
						<li><a href="#">Dignissim purus</a></li>
						<li><a href="#">Tempus pretium</a></li>
						<li><a href="#">Dignissim neque</a></li>
						<li><a href="#">Ornared id aliquet</a></li>
						<li><a href="#">Ultrices id du</a></li>
						<li><a href="#">Commodo sit</a></li>
						
					</ul>
				</div>
				<div class="col-md-3 footer-bottom-cate cate-bottom">
					<h6>Our Address</h6>
					<ul>
						<li>Aliquam metus  dui. </li>
						<li>orci, ornareidquet</li>
						<li> ut,DUI.</li>
						<li>nisi, dignissim</li>
						<li>gravida at.</li>
						<li class="phone"><P></P>H : 6985792466</li>
					</ul>
				</div>
				<div class="clearfix"> </div>
				<p class="footer-class">Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
	</div>
</div>

<!--//footer-->
</body>
</html>

<script>

	//调用属性显示函数
    getAttributes();
    //调用产品显示函数
	getProducts('');
    //调用检测自己的登录状态
    proveMe();

    var arr = []; //已选择的属性数组
    var arrId = []; //已选属性的id数组
    var pageNum = 1;//当前页码
    var pages = 0;//总页数


    //检测自己的登录状态
    function proveMe() {
        $.ajax({
            type:'post',
            url:'/user/proveMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                //已登录
                if(data.code==200){
                    var user = data.data.user;
                    var userid = user.userid;
                    var account = user.account;
                    var username = user.username;
                    var email = user.email;

                    //调用显示用户在线信息函数
                    showUser(username);
                }else{
                    //调用显示用户在线缺省值的函数
                    showDefault();
                }
            }
        });
    }

    //获取第一页商品的数据
	function getProducts(data) {

	    if(data!=''){
            data = data + "&attributeValue=" + arrId.toString();
		}

        $.ajax({
            type:'get',
            url:'/product/selectByPage',
            data:data,
            cache:false,
            dataType:'json',
            success:function(data){
                var total = data.total;	//总数据数
                var list = data.list; //数据列表
                pageNum = data.pageNum; //页码
                pages = data.pages;  //总页码
                var prePage = data.prePage;  //上一页
                var nextPage = data.nextPage;  //下一页
                var isFirstPage = data.isFirstPage;  //是否为第一页
                var isLastPage = data.isLastPage;	//是否为最后一页

                //打印页码相关控件
                paintPage(total, pageNum, pages);

                //打印商品信息
                showProduct(list);
            }
        });
    }

    //注销
    function removeMe() {
        $.ajax({
            type:'post',
            url:'/user/removeMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                if(data.status==200){
                    proveMe();
                }
            }
        });
    }

    //打印一页商品
    function showProduct(list) {
	    //清空所有行
	    for(var i=1; i<=4; i++){
	        var value = "#productList" + i;
            $(value).empty();
		}
        //打印每一行商品
        for(var i=0; i<list.length; i++){
            //循环获取商品数据
            var productid = list[i].productid;
            var productname = list[i].productname;
            var productprice = list[i].productprice;
            var producttype = list[i].producttype;
            var imageurl = list[i].imageurl;
            var productdate = list[i].productdate;
            var productnum = list[i].productnum;
            var productsales = list[i].productsales;
            //拼接成商品模块并显示
            var value = "<div class='col-md-4 col-md3'>" +
                "<div class='col-md1 simpleCart_shelfItem'>" +
                "<a href='single.html?productId="+ productid +"'>" +
                "<img class='img-responsive' src='.."+ imageurl +"' alt='' />" +
                "</a>" +
                "<h3><a href='single.html?productId="+ productid +"'>"+ productname +"</a></h3>" +
                "<div class='price'>" +
                "<h5 class='item_price'>￥"+ productprice +"</h5>" +
                "<a href='single.html?productId="+ productid +"' class='item_add'>查看详情</a>" +
                "<div class='clearfix'> </div>" +
                "</div>" +
                "</div>" +
                "</div>"
            var num = parseInt(i/3)+1;
            var listNum = "#productList"+ num;
            $(listNum).append(value);
        };
    }

    //获取属性栏的数据
    function getAttributes() {
        $.ajax({
            type:'get',
            url:'/attribute/selectAll',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                var json = eval(data); //数组
                var flag = '';
                var num = 1;
                $.each(json, function (index) {
                    //循环获取数据
					var Id = json[index].attributeid;
                    var Type = json[index].attributetype;
                    var Value = json[index].attributevalue;
                    var Show = json[index].attributeshow;

                    //输出多选框的类别名
                    if(flag!=Type){
                        $("#attribute").append("<div class=\'line\'></div>");
                        $("#attribute").append("<br><b style='font-size: 20px'>" + Type + "</b>");
                        flag = Type;
                    }
                    var value = "<div class='box'><input type='checkbox' name=" + Type + " value=" + Show+","+Id + " id='checkbox"+ num +"'/><label for='checkbox"+ num +"'>" + Show + "</label></div>"
                    $("#attribute").append(value);
                    num ++;
                });

                //为多选框绑定事件
                binding();
            }
        });
    }


    //为多选框绑定事件
    function binding() {
        $("input[type=checkbox]").change(function() {
            var checkboxValue = $(this).attr('value');
            var values = checkboxValue.split(",");
            //将属性的数据与id信息放到相应的集合
            if(arr.includes(values[0])==false){
                //选中时加入到arr中
                arr.push(values[0]);
                arrId.push(values[1])
            }else {
                //取消选中时从arr中删除
                arr.splice(arr.indexOf(values[0]),1);
                arrId.splice(arrId.indexOf(values[1]),1);
            }

            //如果属性列表不为空输出该标签
            $("#attributeTitle").empty();
            if(arr.length>0){
                $("#attributeTitle").append("<b>您的选择</b>");
            }

			//输出已有的熟悉
            $("#attributeList").empty();
            for(var i=0; i<arr.length; i++){
                var li = "<li>&nbsp;"+ arr[i] +"</li>"
                $("#attributeList").append(li);
            }

            //根据筛选的属性获取商品信息
            getProductsByAttribute();
        })
    }

    //刷新翻页相关组件
    function paintPage(total, pageNum, pages ) {
        //刷新当前页码
    	var value = "&nbsp;&nbsp;&nbsp;&nbsp;-第" + pageNum + "页-";
        $("#pageNum").empty();
        $("#pageNum").append(value);
        //刷新页码列表
        $("#page").empty();
        for(var i=1; i<=pages; i++){
            $("#page").append("<a href='#' onclick='changePage("+ i +")' class='listANext'>"+ i +"</a>");
		}
        //刷新总页数
        $("#totalPage").empty();
		$("#totalPage").append("<h3 style='color: #8D8D8D;'>&nbsp;/"+ pages +"</h3>");

        //刷新总记录数
        $("#totalProduct").empty();
        $("#totalProduct").append("<p style='color: #9d9d9d; font-size: 20px;'>&nbsp;&nbsp;&nbsp;共有"+total +"件商品</p>");
    }

    //更改页码，发送Ajax请求并得到数据显示
    function changePage(pageNum) {
		getProducts("pageNum="+pageNum);
    }

    //根据筛选的属性获取商品信息
    function getProductsByAttribute() {
		getProducts();
    }

    //上一页
    function previousPage() {
        var pn = pageNum - 1;
        if(pn>=1){
            getProducts("pageNum="+pn);
		}else {
            layer.msg("当前已在第一页！！");
		}
    }

    //下一页
    function nextPage() {
        var pn = pageNum + 1;
        if(pn<=pages){
            getProducts("pageNum="+pn);
        }else {
            layer.msg("已经到最后了！！");
        }
    }


    //显示用户在线信息函数
    function showUser(username) {
        $("#userInfo").empty();
        $("#userInfo").append("<p class='log' style='width:250px;font-weight:400;font-size:20px;float: left;margin-top: 14px'>欢迎您，<a href='userInfo.html' style='color:black;display: inline;margin: 0;'>"+ username +"</a><a style='display: inline;color: #B2B2B2' onclick='removeMe()' href='#'>注销</a></p>");
    }

    //显示用户在线缺省值的函数
    function showDefault() {
        $("#userInfo").empty();
        $("#userInfo").append("<p class='log'><a href='account.html'  >登陆</a>"+
            "<span>or</span><a  href='register.html'  >注册</a></p>");
    }

</script>